<template>
    <div>
        <h1>{{title}}</h1>
        <div class="panel panel-success">
            <div class="panel-body">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="菜品名称">
                        <el-input v-model="form.name" placholder="请输入菜品的名称"></el-input>
                    </el-form-item>
                    <div class="row">
                        <div class="col-md-6">
                            <el-form-item label="菜品价格">
                                <el-input-number v-model="form.price" :min="0"></el-input-number>
                            </el-form-item>
                            <el-form-item label="菜品卡路里">
                                <el-input-number v-model="form.calorie" :min="0"></el-input-number>
                            </el-form-item>
                            <el-form-item label="菜品推荐度">
                                <el-input-number v-model="form.stock" :min="0"></el-input-number>
                            </el-form-item>
                            <el-form-item label="菜品介绍">
                                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.description"
                                          placholder="请输入菜品的介绍"></el-input>
                            </el-form-item>
                        </div>
                        <div class="col-md-6">
                            <el-form-item label="菜品分类">
                                <el-select v-model="form.category" multiple placeholder="请选择">
                                    <el-option
                                            v-for="item in category"
                                            :key="item.type"
                                            :label="item.name"
                                            :value="item.type">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否上架">
                                <el-switch
                                        v-model="form.grounding"
                                        on-text="上架"
                                        off-text="下架">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="上传详细图片">
                                <el-upload
                                        class="avatar-uploader"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <img v-if="form.image" :src="form.image" class="avatar">
                                    <i v-else class="el-icon-plus
                                     avatar-uploader-icon"></i>
                                </el-upload>
                                <label class="el-form-item__label icon-uploader">上传图标图片</label>
                                <el-upload
                                        class="avatar-uploader"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <img v-if="form.image" :src="form.image" class="avatar">
                                    <i v-else class="el-icon-plus
                                     avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
                <footer class="text-center">
                    <el-button type="primary">{{confirmBtnTip}}</el-button>
                    <el-button type="danger">{{errorBtnTip}}</el-button>
                </footer>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'Detail',
    data () {
      return {
        id: '0',
        title: '新增菜品',
        form: {},
        confirmBtnTip: '确定修改',
        errorBtnTip: '取消修改',
        category: [
          {
            'name': '热榜', // 分类名
            'type': 1 // 分类对应的id
          },
          {
            'name': '好吃的',
            'type': 2
          },
          {
            'name': '西餐',
            'type': 3
          },
          {
            'name': '中餐',
            'type': 4
          },
          {
            'name': '饮品',
            'type': 5
          },
          {
            'name': '主食',
            'type': 6
          }
        ]
      }
    },
    methods: {
      handleAvatarSuccess (res, file) {
        this.form.image = URL.createObjectURL(file.raw)
      },
      beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      }
    },
    mounted () {
      this.id = this.$route.params.id
      this.confirmBtnTip = this.id !== 0 ? '确定修改' : '确定新增'
      this.errorBtnTip = this.id !== 0 ? '取消修改' : '取消新增'
      this.title = this.id === 0 ? '新增菜品' : '编辑菜品'
    }
  }
</script>

<style>
    .avatar-uploader{
        display: inline-block;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #a8a8a8;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 140px;
        height: 140px;
        line-height: 140px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .icon-uploader{
        float: none;
        vertical-align: top;
    }
</style>
